<template>
  <div id="bill">
    <div class="msg">协议签署后将自动生成相应账单，为了避免影响您的使用，请在账单生成7日内支付账单。<span @click="showContract">点击查看《优享车三方合作协议》</span></div>
    <div class="bill_list">
      <div class="tags">
        <el-row type="flex" class="row-bg" justify="space-around">
          <el-col :span="6"><div class="grid-content" @click="changeTab('')"><span :class="{active: payStatus==''}">全部</span></div><div v-show="payStatus==''" class="down-line"></div></el-col>
          <el-col :span="6"><div class="grid-content" @click="changeTab('01')"><span :class="{active: payStatus=='01'}">待支付</span></div><div v-show="payStatus=='01'" class="down-line"></div></el-col>
          <el-col :span="6"><div class="grid-content" @click="changeTab('02')"><span :class="{active: payStatus=='02'}"></span>已支付</div><div v-show="payStatus=='02'" class="down-line"></div></el-col>
        </el-row>
      </div>
      <div class="bill-items">
        <div class="detail bill-item block" v-for="(item, index) in dataList" :key="index">
          <p class="flex space-between">
            <span>{{item.orderTime | getFormateDate}}</span>
            <span v-show="item.orderPayStatus=='01' && item.contractStatus=='02' && item.orderStatus=='02'" class="is-wait">待支付</span>
            <span v-show="item.contractStatus=='03'" class="is-over">签约失败</span>
            <!--<span v-show="item.orderStatus=='01' && item.contractStatus=='02'" class="is-over">已取消</span>-->
            <span v-show="item.orderPayStatus=='02' && item.contractStatus=='02' && item.invoiceStatus=='01'" class="is-over">已支付</span>
            <span v-show="item.contractStatus=='01' && item.orderStatus==null" class="is-over" style="color: #1C67FF;">商户确认中</span>
            <span v-show="item.orderStatus=='01' && item.contractStatus=='01'" class="is-over" style="color:#FF5D32;">商户未确认</span>
            <span v-show="item.orderPayStatus=='01' && item.contractStatus=='02'  && item.orderStatus=='01'" class="is-over" style="color: #FF5D32;">已过期</span>
            <span v-show="item.orderPayStatus=='02' && item.orderStatus=='02' && item.contractStatus=='02' && item.invoiceStatus=='02'" class="is-over">已申请</span>
            <span v-show="item.orderStatus=='03'" class="is-over" style="color: #FF5D32;">已结束</span>
          </p>
          <p class="flex space-between"><span>车主</span><span>{{item.ownerName}}</span></p>
          <p class="flex space-between"><span>车牌号码</span><span>{{item.carNumber}}</span></p>
          <p class="flex space-between"><span>账单周期</span><span v-if="item.leaseStartDate">{{item.leaseStartDate | getFormateDate('y.m.d')}}-{{item.leaseEndDate | getFormateDate('y.m.d')}}</span><span v-else>{{item.cycle | convertWord}}</span></p>
          <p class="flex space-between"><span>租赁费</span><span>{{item.leaseFee}}元</span></p>
          <p class="flex space-between"><span>服务费</span><span>{{item.serviceFee}}元</span></p>
          <p class="flex space-between"><span>应付金额</span><span style="color: #FF5D32; font-weight: bold;">{{item.leaseFee | accAdd(item.serviceFee)}}元</span></p>
          <div v-show="item.orderPayStatus=='01' && item.contractStatus=='02' && item.orderStatus=='02'" class="base_btn pay-btn" @click="goUrl('center', 'topay', item.id)">立即支付</div>
          <div v-show="item.orderPayStatus=='02' && item.leaseFeePayStatus=='02' && item.invoiceStatus=='01'" class="base_btn gray-btn" @click="goUrl('company', 'apply', item.id)">发票申请</div>
          <div v-show="item.orderPayStatus=='02' && item.leaseFeePayStatus==null" class="base_btn zl-btn" @click="enterConfirmCar(item, index)" style="margin-right: 10px;">确认收车</div>
          <div v-show="item.orderPayStatus=='02' && item.contractStatus=='02' && item.invoiceStatus=='03'"><div><div @click="toInvoiceDetail(item, '01')" class="base_btn zl-btn">租赁费发票</div><div class="base_btn fw-btn" @click="toInvoiceDetail(item, '02')">服务费发票</div></div></div>
          <div style="clear: both;"></div>
        </div>

        <!--<div class="detail bill-item block">
          <p class="flex space-between"><span>2019-03-23 12:20:32</span><span class="is-over">已取消</span></p>
          <p class="flex space-between"><span>商户名称</span><span>江海区云商湘170号商品信息咨询部</span></p>
          <p class="flex space-between"><span>账单周期</span><span>2019.12.31-2020.01.09</span></p>
          <p class="flex space-between"><span>应付金额</span><span>10,400元</span></p>
          <div class="base_btn gray-btn" @click="goUrl('center', 'apply')">发票申请</div>
          <div style="clear: both;"></div>
        </div>

        <div class="detail bill-item block">
          <p class="flex space-between"><span>2019-03-23 12:20:32</span><span class="is-over">已取消</span><span class="is-wait">待支付</span><span class="is-over">已支付</span></p>
          <p class="flex space-between"><span>商户名称</span><span>江海区云商湘170号商品信息咨询部</span></p>
          <p class="flex space-between"><span>账单周期</span><span>2019.12.31-2020.01.09</span></p>
          <p class="flex space-between"><span>应付金额</span><span>10,400元</span></p>
          <div class="base_btn gray-btn">发票申请</div>
          <div class="base_btn pay-btn">立即支付</div>
          <div style="clear: both;"></div>
        </div>-->

      </div>
      <p v-if="loading" style="text-align: center;">加载中...</p>
      <p v-if="!haveMore" style="text-align: center; color:#999; font-size:12px;">没有更多数据</p>
      <pagescroll @reachbottom="reachbottom"></pagescroll>
    </div>
    <mnav cur="2"></mnav>
  </div>
</template>

<script>
  import { VIEW_PDF_URL } from '../../constants/index'
  export default {
    name: 'company-bill',
    data () {
      return {
        dataList: [],  //数据列表
        pageSize: 10,
        currentPage: 1,
        payStatus: '',
        loading: false,
        haveMore: true,
      }
    },
    created () {
      this.getDates();
    },
    methods: {
      //查看合同
      showContract(){
        window.location.href = VIEW_PDF_URL+'http://dqptcs.12366.com/yxc_sfht_new1.pdf'
      },
      goUrl(path, funCode, id) {
        this.$router.push({
          path: '/'+ path,
          query: {
            funCode: funCode,
            id: id
          }
        })
      },
      toInvoiceDetail(item, type){
        this.$router.push({
          path: '/center',
          query: {
            funCode: 'invoiceDetail',
            orderId: item.id,
            type: type
          }
        })
      },
      //切换标签
      changeTab( status ){
        this.payStatus = status;
        this.dataList = [];
        this.currentPage = 1;
        this.haveMore = true;
        this.getDates();
      },
      //滑动到底部
      reachbottom(){
        this.currentPage++;
        if(this.haveMore) {
          this.getDates();
        }
      },
      //获取数据列表
      getDates() {
        //查询条件
        let data = {
          pageSize: this.pageSize,
          currentPage: this.currentPage,
          orderPayStatus: this.payStatus
        }
        if(this.payStatus == '01') {
          data.orderStatus = '02';
        }
        this.$http.post('yxc/order/queryPage',data).then(res=>{
          if(res.code=200) {
//            this.dataList = res.data.records;
            if(res.data.records.length == 0) {
              this.haveMore = false;
            }
            this.dataList.push(...res.data.records)
          }
        })
      },
      enterConfirmCar(item, index){
        let that = this;
        this.$mPromot({
          width: '80%',
          title: '确认收车',
          funCode: 'comfims',
          props: {
            btn2:'确认',
            type:'confirm',
            info: '<div style="text-align: left; padding-left: 15px;">点击“确认”后，平台将支付租车费用至车主，请确认：<br>1.车辆为协议约定车辆 ' + item.carNumber + ';<br>2.车辆有效证件齐全，车况良好;<br>根据相关规定，商户当月开具发票上限额度10万元，请及时申请开票，避免额度不足。</div>'
          },
          callback: (close,str) => {
            if(str == 1) {
              that.$http.get('yxc/order/enterConfirmCar',{
               params: {
                 id: item.id
               }
             }).then(res=>{
               if(res.code == 200) {
                 that.$toast('收车成功')
                 that.dataList[index].leaseFeePayStatus = '01';
               }
             })
            }

            close();
          }
        })

      }
    },
    filters:{
      //转换年季月
      convertWord: function(val) {
        if(val == 'M') return '月';
        if(val == 'Q') return '季';
        if(val == 'Y') return '年';
      }
    }
  }
</script>

<style lang="scss" scoped>
  #bill {
    margin: 0 10px;
    margin-bottom: 80px;
  }

  h3 {
    margin: 0px 0px;
  }

  .msg {
    margin-top: 5px;
    padding: 10px 5px;
    background: rgba(255, 238, 233, 1);
    border-radius: 5px;
    /*text-align: center;*/
    color: #FF5D32;
    margin-bottom: 10px;
    font-size: 12px;
    span {
      color: #333;
      text-decoration: underline;
      /*border-bottom: 1px solid #333;*/
    }

  }

  .tags{
    .row-bg {
      padding: 10px 0;
    }
    .down-line{height: 4px; width: 20px; background-color: #1C67FF; margin: 0 auto; border-radius: 2px;}
    .grid-content{
      text-align: center;
      font-size: 15px;
      height: 30px;
      line-height:30px;
      color: #999999;
      .active{
        color: #333333;
        font-weight: bold;
      }
    }
  }

  .submit {
    background: rgba(28, 103, 255, 1);
    border-radius: 5px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #fff;
    margin: 20px 10px;
  }

  .flex {
    display: flex;
  }

  .space-around {
    justify-content: space-around;
  }

  .space-between {
    justify-content: space-between;
  }

  .block {
    margin: 10px auto;
    border-radius: 10px;
    background-color: #fff;
    padding: 15px 15px;

  .infos {
    font-size: 14px;
    color: #333;
  }

  }

  .base_btn{display: inline-block; padding: 0px 20px;border-radius: 5px; height: 32px; line-height: 32px;text-align: center;}
  .detail{
    font-size:13px;
    .pay-btn{border:1px solid rgba(255,93,50,1);border-radius:5px; color: #FF5D32; font-weight: bold; float: right;}
    .gray-btn{border:1px solid rgba(160,160,160,1);border-radius:5px; color: #333333; font-weight: bold; float:right;}
    .fw-btn{border:1px solid #FF9600;border-radius:5px; color: #FF9600; font-weight: bold; float: right; padding: 0 10px; margin-right: 10px;}
    .zl-btn{border:1px solid #1C67FF;border-radius:5px; color: #1C67FF; font-weight: bold; float:right; padding: 0 10px;}
  }
  .detail p{color: #333333;}
  .detail p span:first-child{color: #999999;}
  .detail p{
    .is-wait{color:#FF5D32; font-weight: bold;}
    .is-over{color:#999; font-weight: bold;}
  }


</style>
<style>
  .el-step__icon-inner {
    font-weight: normal;
  }


</style>
